<template>
  <el-dropdown @command="handleCommand" trigger="hover">
    <div class="avatar-content">
      <img :src="userStore.avatar" class="avatar-image" />
    </div>

    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item divided command="logout">
          <span>退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
/* ---------- 1. 引入 useUserStore ---------- */
import { useUserStore } from "@/store/modules/user";

/* ---------- 2. 声明并解构 emit ---------- */
const emit = defineEmits(["command"]);

const userStore = useUserStore();

/* ---------- 3. 把命令原封不动抛给父组件 ---------- */
function handleCommand(cmd) {
  emit("command", cmd);
}
</script>

<style scoped>
.avatar-image {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 0.125rem solid #e5e7eb;
}
</style>
